import React ,{ useState ,useEffect} from 'react'
import { Button,DatePicker,ConfigProvider,Input,Select  } from 'antd';
import locale from 'antd/locale/zh_CN';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import { RollbackOutlined, SearchOutlined } from '@ant-design/icons';
import 'dayjs/locale/zh-cn';
import ActiveProvide from './ActiveProvide';
import DynamicPagination from '../components/pages/DynamicPagination';
import axios from 'axios';
import '../css/lzk.css'
axios.defaults.baseURL = 'http://localhost:3000/'
dayjs.locale('zh-cn');
const { RangePicker } = DatePicker;
export default function space() {
  const [selectedValue, setSelectedValue] = useState(undefined);
  const [selectedValues, setSelectedValues] = useState(undefined);
  let [value,setvalue]=useState()
  let [typelist,settypelist]=useState([])
  let [status,setstatus]=useState([])
  const navigate = useNavigate();
  const  [activeList,setactiveList] = useState([])
  const  [totalRecords,settotals]=useState()
  const [page,setpage]=useState(1)
  const [pageSize,setpagesize]=useState(2)
    // 定义状态来存储选择的日期范围
    const [dateRange, setDateRange] = useState([]);

    // 处理日期选择变化的函数
    const handleDateChange = (dates) => {
        setDateRange(dates);
    };
    const gettypelist = async ()=>{
        const {data:{list}} = await axios.get('/kai/gettype')
         const formattedOptions = list.map(item => ({
                    value: item._id,
                    label: item.lable
                }));
          settypelist(formattedOptions)
    }
    const getstatus = async ()=>{
        const {data:{list}} = await axios.get('/kai/getstatus')
        const formattedOptions = list.map(item => ({
                    value: item._id,
                    label: item.value
                }));
        setstatus(formattedOptions)
    }
    

    const handlePageChange = (page, pageSize) => {
      setpage(page)
      setpagesize(pageSize)
    };
    const handleShowSizeChange = (current, size) => {
      setpage(current)
      setpagesize(size)
};
    const sou = ()=>{
        getactive()
    }
    const getactive=async()=>{
      const {data:{list,total}} = await axios.get('/kai/getactive',{params:{page:page,pagesize:pageSize,tid:selectedValue,sid:selectedValues}})
      setactiveList(list)
      settotals(total)
    }
    

    // const getDynamicList = async ()=>{
    //     const {data:{list,total}} = await axios.get('/kai/getdynamic',{params:{name:value,page:page,pagesize:pageSize,
    //       startdate:dateRange[0],endate:dateRange[1]}})
    //     setdynamicList(list)
    //     settotals(total)
    // }
    const qu = ()=>{
        if (value.length > 0) {
            // 截取字符串，去掉最后一个字符
            setvalue(value.slice(0, -1));  
        }
    }
    const handleChange = (value) => {
      setSelectedValue(value);
};
const handleChanges = (value) => {
      setSelectedValues(value);
};
    useEffect(()=>{
        gettypelist(),
        getstatus(),
        getactive()
    },[page,pageSize,value,dateRange,selectedValue,selectedValues])
    //  useEffect(() => {
    //     getDynamicList();
    // }, [pageSize]);
  return (
     <div style={{
      scrollbarWidth:'none',
      overflowY:'auto',
      margin:'auto',
      width: '70%',
      height: '100%',
    }
    }>
      <div style={{marginTop: '0.6rem',overflow:'hidden',backgroundColor: 'white',width:'100%',height:'30%',borderRadius:'20px'}}>
        <div style={{display:'flex',margin:'0.6rem'}}>
            <div style={{width:'0.16rem',marginTop:'0.1rem',borderRadius:'0.1rem',height:'0.6rem',backgroundColor:'#3dd4a7'}}></div>
            <div style={{fontSize:'0.5rem',marginLeft:'0.2rem'}}>活动管理</div>
        </div>
        <div style={{width:'100%',fontSize:'0.4rem',color:'#999',margin:'1rem 0.6rem'}}>
            <div style={{display:'flex'}}>
              <div>状态</div>
               <div style={{margin:'-0.2rem 0.5rem'}}>
                   <Select
                        placeholder="请选择"
                        defaultValue={selectedValue}
                        style={{
                            width: 120,
                            marginTop: '0.1rem',
                        }}
                        onChange={handleChange}
                        options={typelist}
                    >
                    </Select>

                </div>
              <div style={{margin:'-0.3rem 0.1rem'}}>
                  <div style={{marginTop:'0.3rem'}}>分类</div>
               <div style={{margin:'-0.7rem 1.2rem'}}>
                   <Select
                   placeholder="请选择"
                    defaultValue={selectedValues}
                    style={{
                      width: 120,
                      marginTop:'0.1rem',
                    }}
                    onChange={handleChanges}
                    options={status}
                  />
                </div>
              </div>
            </div>
            <div style={{display:'flex',marginTop:'1rem'}}>
              <div>更新日期</div> 
              <div style={{margin:'-0.2rem 0.5rem'}}>
                  <ConfigProvider locale={locale}>
                  <RangePicker onChange={handleDateChange}  style={{height:'1rem',width:'10rem'}}/>
                  </ConfigProvider>
              </div>
              <div style={{margin:'-0.2rem 0.1rem'}}>
                  <Input onChange={(e)=>{setvalue(e.target.value)}} value={value} style={{height:'1rem',width:'10rem'}} placeholder="请输入关键字" />
              </div>
              <Button onClick={sou} style={{textAlign:'center',lineHeight:'1rem',margin:'-0.2rem 0.3rem',width:'1rem',height:'1rem',background:'#5adbb5',color:'white',borderRadius:'0.1rem'}} type="primary"  icon={<SearchOutlined />} />
              <Button onClick={qu} style={{textAlign:'center',lineHeight:'1rem',margin:'-0.2rem 0.3rem',width:'1rem',height:'1rem',color:'black'}} type="primary" color='default' variant="outlined" icon={<RollbackOutlined />} />
            </div>
            
           
        </div>
      </div>
      <div style={{marginTop: '0.6rem',overflow:'hidden',backgroundColor: 'white',width:'100%',marginBottom:'1.25rem',borderRadius:'20px'}}>
        <div style={{margin:'0.5rem 25rem',display:'flex'}} >
           <Button onClick={()=>{navigate('/zhu/navpage/AddActive')}} style={{background:'#5adbb5',color:'white',width:'1.8rem',height:'1rem'}} variant="solid">
                          新增
            </Button>
          <Button style={{marginLeft:'0.5rem',width:'2.4rem',height:'1rem'}} color="default" variant="outlined" >
          批量操作
          </Button>
        </div>
        <div style={{width:'92%',margin:'0 auto',position:'relative'}}>
          <ActiveProvide activelist={activeList}></ActiveProvide>
           <div style={{width:'50%',margin:'0.5rem 17rem'}}>
            <DynamicPagination
                style={{position:'absolute',right:'1rem'}}
                pageSize={pageSize}
                total={totalRecords}
                currentPage={page}
                defaultCurrent={page}
                defaultPageSize={pageSize}
                showQuickJumper
                onPageChange={handlePageChange}
                onShowSizeChange={handleShowSizeChange}
            />
        </div>
        </div>
      </div>
    </div>
  )
}